<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>01立即监听</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        姓: <input type="text" v-model="firstName"><br>
        名: <input type="text" v-model="lastName"><br>
        全名: <span>{{fullName}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            data: {
                firstName:'zhang',
                lastName:'san',
                fullName:''
            },
            methods: {},
            // computed写法
            // computed: {
            //     fullName(){
            //     return this.firstName + '-'+this.lastName 
            //     }
            // }
            watch:{
                firstName:{
                    // 一上来就执行一次
                    immediate:true,
                    handler(value){
                       this.fullName = value + '-' +this.lastName
                    }
                },
                lastName:{
                    handler(value){
                     this.fullName = this.firstName + '-' + value
                    }
                }
            }
        })
    </script>
</body>

</html>